<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>输入框</title>

        <style type="text/css">
            .input-wrapper{
                overflow: hidden ;
                width: 200px ;
                height: 50px ;
                border: 1px solid #dedede ;
                border-radius: 5px;
            }

            .input-wrapper>* {
                height: 50px ;
                line-height: 50px ;
                border:none ;
                outline: none ;
            }

            .input-wrapper>input:nth-child(1) {
                float: left ;
                width: 70%;
            }
            .input-wrapper>input:nth-child(2) {
                float: right ;
                width: 25%;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        </style>

    </head>
    <body>

        <div class="input-wrapper">
            <input type="password" name="passwd" >
            <input type="button" value="显示">
        </div>

        <script type="text/javascript">
            let btn = document.querySelector( '.input-wrapper>[type=button]' );
            console.log( btn );

            let listener = () => {
                let previous = btn.previousElementSibling ; 
                if( previous.getAttribute( 'type' ) === 'password' ){
                    previous.setAttribute( 'type' , 'text' );
                    btn.setAttribute( 'value' , '隐藏' );
                } else {
                    previous.setAttribute( 'type' , 'password' );
                    btn.setAttribute( 'value' , '显示' );
                }
            }

            btn.addEventListener( 'click' , listener , false );
        </script>
        
    </body>
</html>